<template>
    <div class="message">
        <el-button type="primary" @click="messageAdd">添加消息</el-button>
        <el-table
                :data="messages"
                style="width: 100%"
        >
            <el-table-column
                    label="标题">
                <template slot-scope="scope">
                    <span>{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="content">
                <template slot-scope="scope">
                    <span>{{ scope.row.content }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="消息类型">
                <template slot-scope="scope">
                    <span>{{ messageTypeConvert(scope.row.msgType) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="所属用户">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ userConvert(scope.row.userId) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="发布时间">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.createDate }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
                    :filters="[{'text': '审核通过',value:1},{'text': '待审核',value:0},{'text': '审核失败',value: 2},]"
                    :filter-method="flagFilter"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ flagConvert(scope.row.flag) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button><br />
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                center>
            <el-form :model="message" label-width="100px" class="demo-ruleForm">
                <el-form-item label="审核状态" prop="region">
                    <el-select v-model="message.flag">
                        <el-option v-for="(flag,index) in flagType" :key="index" :value="index" :label="flag">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="formSubmit">确 定</el-button>
          </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Message",
        data(){
            return {
                messages : [],
                message:{},
                dialogVisible : false,
                isAdd : null,
                messagesType: null, // 所有消息类型
                users: null,
                flagType: ["待审核","审核通过","审核失败"],
                flag: 1,
            }
        },
        created() {
            this.getMessage();
            this.getMessageType();
            this.getUser();
        },
        methods: {
            getMessage(){
                this.$api.message.getAll().then(res => {
                    this.messages = res.data;
                })
            },
            flagFilter(value,row){
                if (row.flag === value)
                    return row;
            },
            getMessageType(){
                this.$api.messageType.getAll().then(res => {
                    this.messagesType = new Map();
                    res.data.map(item => {
                        this.messagesType.set(item.id,item.typeName);
                    });
                });
            },
            getUser(){
                this.$api.user.getAll().then(res => {
                    this.users = new Map();
                    res.data.map(item => {
                        this.users.set(item.id,item.userName);
                    });
                });
            },
            flagConvert(flag){
                return this.flagType[flag];
            },
            messageTypeConvert(messageTypeId){
                if (this.messagesType !== null)
                    return this.messagesType.get(messageTypeId);
                else
                    return null;
            },
            userConvert(userId){
                if (this.users !== null)
                    return this.users.get(userId);
                else
                    return null;
            },
            messageAdd(){
                this.$message.info("十分抱歉，暂时不支持添加此功能");
                setTimeout(() => this.$message.success("友情提示: 修改 server/index.json 的 message 字段 "),1000)
                // this.isAdd = true;
                // this.user = {userType : 1,}
                // this.dialogVisible = true;
            },
            handleDelete(id , obj){
                this.$confirm('确定要删除该用户吗?','提示',{
                    confirmButtonText : '确定',
                    cancelButtonText : '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.message.messageDelete(obj.id)
                        .then(res => {
                            console.log(res);
                            this.$message.success('删除成功');
                            this.getMessage();
                        });
                }).catch(() => {
                    this.$message.success('已取消');
                })
            },
            handleEdit(id , obj){
                this.dialogVisible=true;
                this.message = {...obj};
                this.isAdd = false;
            },
            formSubmit(){
                if (this.isAdd === null) return this.$message.error('错误操作');
                if (this.isAdd){
                    this.$api.message.messageAdd(this.message)
                        .then(() => {
                            this.$message.success('添加成功!');
                            this.dialogVisible = false;
                            this.getMessage();
                        })
                }else{
                    console.log(this.message);
                    this.$api.message.messagePatch(this.message.id , this.message)
                        .then(() => {
                            this.$message.success('修改成功!');
                            this.dialogVisible = false;
                            this.getMessage();
                        })
                }
            }
        }
    }
</script>

<style scoped>

</style>
